<template>
  <div class="breadcrumb" :style="style">
    <div>
      <el-icon>
        <Location />
      </el-icon>
      当前位置：
      <div v-if="route.path == 'home/index'">{{ welcomeSearchKey }}</div>
      <BreadcrumbItem :list="route.matched" v-else />
      <slot></slot>
    </div>
    <div class="search-box">
      <div class="search">
        <img src="@/assets/images/camera.png" alt="" @click="upload = !upload" />
        <el-divider direction="vertical" />
        <el-select-v2
          v-model="searchKey"
          filterable
          remote
          :options="options"
          :remote-method="remoteMethod"
          placeholder="请输入商品名、品牌名、3级分类名搜索商品"
          size="large"
          style="flex: 1"
          @keyup.enter="search"
        />
        <img src="@/assets/images/search-icon.png" alt="" />
        <UploadImage v-if="upload" ref="el" @close="upload = false" />
      </div>
      <img src="@/assets/images/footprint.png" alt="" />
      <img @click="$router.push({ path: '/manage/collection' })" src="@/assets/images/collect.png" alt="" />
    </div>
  </div>
</template>

<script setup>
import BreadcrumbItem from "./BreadcrumbItem.vue";
import UploadImage from "./UploadImage.vue";
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, computed } from "vue";
import { _debounce } from "@/utils";
import { getWelcome } from "@/apis/shopHome/home";

const style = computed(() => {
  return {
    background: route.meta.breadcrumbColor ? "white" : "transparent",
    "box-shadow": route.meta.breadcrumbColor ? "0px 4px 10px 0px rgba(220, 223, 230, 0.5)" : "none"
  };
});
const wlecome = ref("");
const router = useRouter();
const route = useRoute();
const upload = ref(false);
const searchKey = ref("");
const welcomeSearchKey = ref("你好！欢迎来到专业设计师选购商城~");

const options = ref([]);
const remoteMethod = value => {
  searchKey.value = value;
};
const search = () => {
  router.push({
    path: "/search/searchkey",
    query: {
      value: searchKey.value,
      searchType: 1
    }
  });
};
onMounted(async () => {
  const res = await getWelcome();
  welcomeSearchKey.value = res.data.length > 0 ? res.data[0].content : "你好！欢迎来到专业设计师选购商城~";
});
</script>

<style lang="scss" scoped>
.breadcrumb {
  width: 100vw;
  min-height: 64px;
  box-shadow: 0px 4px 10px 0px rgba(220, 223, 230, 0.5);
  border-radius: 0px 0px 0px 0px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 50px;
  z-index: 98;
  box-sizing: border-box;
  border-top: 1px solid #f2f3f5 !important;

  > div {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .search-box {
    gap: 10px;

    > img {
      width: 32px;
      height: 32px;
    }

    .search {
      width: 388px;
      height: 32px;
      background: #eef1f4;
      border-radius: 20px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      position: relative;

      > img {
        height: 16px;
        width: 16px;
      }

      ::v-deep(.el-select) {
        border: none;
      }

      ::v-deep(.el-select__wrapper) {
        background: transparent !important;
        box-shadow: none;
        padding: 0;
      }
    }
  }
}
</style>
